/*
 * @Author       : Sayolit
 * @Date         : 2023-01-08 12:14:37
 * @LastEditors  : Sayolit
 * @LastEditTime : 2023-04-10 20:16:31
 * @FilePath     : vite.config.js
 * @Description  :
 * Copyright 2023 OBKoro1, All Rights Reserved.
 * 2023-01-08 12:14:37
 */
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

import postCssPxToRem from 'postcss-pxtorem'
import autoprefixer from 'autoprefixer'

// 自动按需引入element-plus View UI PLUS
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { ViewUiResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
	base: './', // 设置打包路径
	build: {
		outDir: 'dist', // 设置打包后的目录
		chunkSizeWarningLimit: 1500,
		rollupOptions: {
			output: {
				manualChunks(id) {
					if (id.includes('node_modules')) {
						return id
							.toString()
							.split('node_modules/')[1]
							.split('/')[0]
							.toString()
					}
				},
			},
		},
	},
	plugins: [
		vue(),
		AutoImport({
			resolvers: [ElementPlusResolver(), ViewUiResolver()],
			imports: ['vue', 'vue-router', 'vuex'], // 自动导入vue和vue-router相关api(需要pinia的话这里需要引入pinia)
		}),
		Components({
			resolvers: [ElementPlusResolver(), ViewUiResolver()],
		}),
	],
	open: true, // 配置自动启动浏览器
	resolve: {
		alias: {
			'@': path.resolve(__dirname, 'src'),
			views: path.resolve(__dirname, 'src/views'),
			components: path.resolve(__dirname, 'src/components'),
			assets: path.resolve(__dirname, 'src/assets'),
			store: path.resolve(__dirname, 'src/store'),
		},
	},
	server: {
		proxy: {
			'/api': {
				target: 'http://api.voiceprint.hymsk.asia/api', //实际请求地址
				changeOrigin: true,
				rewrite: (path) => path.replace(/^\/api/, ''),
			},
		},
	},
	css: {
		postcss: {
			plugins: [
				autoprefixer({
					overrideBrowserslist: [
						'Android 4.1',
						'iOS 7.1',
						'Chrome > 31',
						'ff > 31', // 仅新版本用 ff>=31
						'ie >= 8',
						// 'not ie <= 11', //不考虑IE浏览器
						'> 1%', //  全球统计有超过1%的使用率使用“>1%”;
						'last 2 versions', // 所有主流浏览器最近2个版本
					],
				}),
				postCssPxToRem({
					// 自适应，px>rem转换
					rootValue: 16, // 75表示750设计稿，37.5表示375设计稿
					propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
					unitPrecision: 6, // 计算结果保留 6 位小数
					selectorBlackList: ['.no-rem', 'no-rem'], // 要忽略的选择器并保留为px，过滤掉norem-开头的class，不进行rem转换
					replace: true, // 转换成 rem 以后，不保留原来的 px 单位属性
					mediaQuery: true, // 允许在媒体查询中转换px。
					minPixelValue: 2, // 设置要替换的最小像素值。
					exclude: /node_modules/i, // 排除 node_modules 文件(node_modules 内文件禁止转换)
				}),
			],
		},
	},
})
